<template>
  <div class="components-container">
      <sweet-modal ref="dialog" class="dialog" :sweetModalMaxWidth="pageWidth" v-bind:blocking="blockings" v-bind:hideCloseButton="hideCloseButtons">
        <h3>{{title}}<span style="font-size:12px;">（附件不得大于4m）</span></h3>
        <div :style="{maxHeight:maxHeight+'px'}" style="overflow:auto;">
            <el-table ref="multipleTable" :data="diechdData" row-key="FCMFCSID" :expand-row-keys="expands" @row-click="rowClick">
                <el-table-column type="expand">
                   
                     <template slot-scope="props">
                        <table class="layui-table" style="border-spacing: 0;">
                            <colgroup>
                                <col>
                                <col width="100">
                                <col width="100">
                                <col width="100">
                            </colgroup>
                            <thead>
                                <tr>
                                    <th style="text-align:center;">附件名</th>
                                    <th style="text-align:center;">下载地址</th>
                                    <th style="text-align:center;">修改</th>
                                    <th style="text-align:center;">删除</th>
                                </tr>
                            </thead>
                            <tbody ref='inputs'>
                                <tr class="allRow" v-for="(chl,index) in fileDetail">
                                    <td>
                                        <el-input v-model="chl.name" @blur="changename($event,chl)" @change="ischange = true"></el-input>
                                    </td>
                                    <td style="text-align:center;">
                                        <el-button @click="download(chl)">查看</el-button>
                                    </td>
                                    <td style="text-align:center;">
                                        <!-- <el-button @click="remove(index)">修改</el-button> -->
                                        <div class="file-boxs"><input accept="image/*" class="file-btn" name="upimage" type="file" @change="imgchanges($event,chl)">修改</div>
                                    </td>
                                    <td style="text-align:center;">
                                        <el-button @click="deletefj(chl)">删除</el-button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </template>
                </el-table-column>
                
                <!-- <el-table-column prop="FCMISNUSTDESC" label="状态" width="150" align="center"></el-table-column>
                <el-table-column prop="FCMFCSID" label="附件名" width="150" align="center"></el-table-column>
                <el-table-column prop="FileNum" label="已上传附件数量" width="150" align="center"></el-table-column>
                <el-table-column prop="FileNums" label="拍照上传" width="200" align="center"><template slot-scope="scope"><button type="primary" @click="photosc(scope.$index,scope.row)">拍照上传</button></template></el-table-column>
                <el-table-column prop="FileNumss" label="选择文件上传" width="200" align="center"><template slot-scope="scope"><input accept="image/*" style="width:60px;heigth:15px;" name="upimage" id="upload_file" type="file" @change="imgchange($event,scope.row)"></template></el-table-column> -->

                <el-table-column prop="FCMISNUSTDESC" label="状态" width="100" align="center"></el-table-column>
                <el-table-column prop="FCMFCSID" label="附件名" width="100" align="center"></el-table-column>
                <el-table-column prop="FileNum" label="已上传附件数量" width="150" align="center"></el-table-column>
                <el-table-column prop="FileNums" label="拍照上传" width="150" align="center"><template slot-scope="scope"><el-button type="primary" @click="photoscs(scope.$index,scope.row)">拍照上传</el-button></template></el-table-column>
                <!-- style="width:60px;heigth:15px;" -->
                <el-table-column prop="FileNumss" label="选择文件上传" width="150" align="center"><template slot-scope="scope"><div class="file-box"><input accept="image/*" class="file-btn" name="upimage" type="file" @change="imgchange($event,scope.row)">上传文件</div></template></el-table-column>
            </el-table>
        </div>
        <div class="layui-form-item btnCenter">
            <el-button id="closeDialogss" @click="closeDialogs">取消</el-button>
            <!-- <el-button type="primary" @click="submit" :loading="this.$store.state.isloading">保存</el-button> -->
        </div>
            <el-dialog title="拍照上传" :visible.sync="a" :modal-append-to-body="false" width="60%" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
                <el-button id="openVideo" type="primary">打开视频</el-button>
                <el-button id="FileUpload" type="primary">清空缩略图</el-button>
                <el-button id="photograph" type="primary">拍照</el-button>
                <div :style="{maxHeight:maxHeight+'px'}" style="overflow:auto;">
                    <div style="width:640px;float:left;">
                        <img id="big" width="640" height="480"/></img>
                    </div>
                    <div id="container" style="float:right;width:250px;height:480px;overflow:auto;"> </div>
                </div>
                <div>
                    <select id="devList" style="width: 120px" ></select> 
                    <select id="resolutionList" style="width: 120px" ></select> 
                </div>
                <div class="layui-form-item btnCenter">
                    <el-button id="closeVideo" @click="closeDialog">取消</el-button>
                    <el-button id="uploads" type="primary" :loading="this.$store.state.isloading">上传</el-button>
                </div>
            </el-dialog>  
      </sweet-modal>
    <!-- </el-dialog>   -->
     
    <AttachmentsUpload ref="Upload"></AttachmentsUpload>
    <selectFileUpload ref="Uploads"></selectFileUpload>
    
  </div>
</template>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/common.scss";
.el-button + .el-button {
  margin-left: 0;
}
.longtext {
  width: 480px;
}
.longertext {
  width: 770px;
}
.sweet-btn {
  margin-top: 20px;
}
.radio {
  margin-top: 9px;
}
.file-box{
    width: 100px;
    height: 42px;
    line-height: 41px;
    border-radius: 4px;
    transition: .1s;
    font-size: 14px;
    color: white;
    background-color: #409EFF;
    border-color: #409EFF;
    display: inline-block;				
    position: relative;	
    top: 3px;				
    overflow: hidden;					
}		
.file-btn{				
    position: absolute;				
    width: 100%;				
    height: 100%;				
    top: 0;    			
    left: 0;    			
    outline: none;    			
    background-color: transparent;    			
    filter:alpha(opacity=0);				
    -moz-opacity:0;				
    -khtml-opacity: 0;				
    opacity: 0;			
}
</style>
<script>
import axios from 'axios' //捷宇高拍仪需要
import sweetModal from "@/components/sweetModal";
import dataTable from "@/components/Table/DataTable";
import apiBase from "@/api/apiBase.js";
import { ORDER } from "@/const/orderConst.js";
import { manage } from "@/mixins/managePage.js";
import AttachmentsUpload from "./AttachmentsUpload";
import selectFileUpload from "./selectFileUpload";
import newscanWS from "@/utils/newscanWebSocket.js";
import { MessageBox,Message } from 'element-ui';
const accesscode=typeof getaccesscode === "function" ? getaccesscode() : 'IEHlf6ROpiOyUCMko90HUzbZ7GrpejjAMimsbQ=='  //捷宇高拍仪需要更换的code码
export default {
  name: "Appendixlist",
  mixins: [manage],
  data() {
    return {
        blockings:true,
        hideCloseButtons:true,
        title: null,
        pageWidth: 1000,
        maxHeight: 800,
        order: null,
        ids:null,
        fileDetail: [],
        expands: [],
        a:false,
        diechdData: [],
        index: null,
        status: null,
        ischange: false,
        FCMFCSIDS: null,
    };
  },
  methods: {
       rowClick(row, event, column) {
          this.openrow(row);
          let nodeName = event.target.nodeName;
                Array.prototype.remove = function (val) {
                    let index = this.indexOf(val);
                    if (index > -1) {
                        this.splice(index, 1);
                    }
                };
                if(nodeName === 'BUTTON' || nodeName === 'INPUT'){
                    return;
                }
                if (this.expands.indexOf(row.FCMFCSID) < 0) {
                    this.expands = []
                    this.expands.push(row.FCMFCSID);
                } else {
                    this.expands.remove(row.FCMFCSID);
                }
 
            },
       //上传图片
      imgchange(e,val){
      var file = e.target.files[0];
      var r = new FileReader();
      r.readAsDataURL(file);
      var s;
      var FRCMBDIDS = this.index;
      var FRCCODNAMES = val.FCMFCSID;
      r.onloadend = function () {
          // 图片的 base64 格式, 可以直接当成 img 的 src 属性值     
           var last= "."+e.target.files[0].name.match(/\.([^\.]+)$/)[1];        
          var dataURL = r.result;
          var w = dataURL.indexOf(',');
          var s = dataURL.substring(w+1);
           let data = {
              FRCMBDID: FRCMBDIDS,
              FRCCODNAME: FRCCODNAMES,
              FileContentBase64: s,
              FleEnt:last,
          };
          apiBase.DoService(
              data,
              apiBase.getApiAdress().FileConfig.CreateFile,
              res => {
                  Message.success('上传成功！')
                  if(res.data.msg == '成功'){
                      Message.success('上传成功！')
                  }else{
                      Message.error('上传失败！')
                  }
              }
            );
      };
      setTimeout(() => {
            this.getData(this.ids);
        },1000)
     
    },
    //改版新加捷宇拍照
         photoscs(index,val){
        ORDER.FCMFCSID = val.FCMFCSID;
        ORDER.FRCMBDID = this.index;
            if (ORDER.Highmeter=='30'){
   //捷宇拍照上传
           
            var instance = axios.create({
                baseURL: 'http://localhost:9528/',
                headers: {
                    'Access-Code': accesscode
                }
            })
            instance.get('/plugin/gaopai?mode=paperphoto').then((response) => {
                // Do something here
                // console.log(response.data)
                //附件上传

    let data = {
        FRCMBDID: ORDER.FRCMBDID,
        FRCCODNAME: ORDER.FCMFCSID,
        FileContentBase64:response.data.data,
        FleEnt: '.jpg',
    };
    apiBase.DoService(
        data,
        apiBase.getApiAdress().FileConfig.CreateFile,
        res => {
            Message.success('上传成功！')
            if(res.data.msg == '成功'){
                Message.success('上传成功！')
     
              
            }else{
                Message.error('上传失败！')
            }
        });
            })
     .then(()=>{
         
  setTimeout(() => {
            this.getData(this.ids);
        },1000)
     })
             }
             else{
       var element = document.getElementById('bigs');
        element.src = 'http://b.hiphotos.baidu.com/zhidao/pic/item/64380cd7912397dd183b1c575882b2b7d0a28727.jpg';
        // this.$refs.gaopaiyi.open();
         this.a = true;
             }

        },
    //拍照上传
    // photoscs(index,val){
    //     ORDER.FCMFCSID = val.FCMFCSID;
    //     ORDER.FRCMBDID = this.index;
    //     var element = document.getElementById('bigs');
    //     element.src = 'http://b.hiphotos.baidu.com/zhidao/pic/item/64380cd7912397dd183b1c575882b2b7d0a28727.jpg';
    //     // this.$refs.gaopaiyi.open();
    //     this.a = true;
    // },
     //修改上传文件名字
    changename(name,val){
        if(this.ischange === false) return;
        let data = {
            FLIID: val.FLIID,
            FLINAME: val.name
        };
        apiBase.DoService(
            data,
              apiBase.getApiAdress().FileConfig.ModifyFileName,
              res => {
                  if(res.data.msg == '成功'){
                      Message.success('附件名修改成功！');
                  }else{
                      Message.error('附件名修改失败！')
                  }
                    this.ischange = false;
              }
        )
    },
     //修改上传图片    FRCCODNAME
      imgchanges(e,val){
      var file = e.target.files[0];
      var r = new FileReader();
      r.readAsDataURL(file);
      var s;
      var FRCMBDIDS = this.index;
      var FRCCODNAMES = this.FCMFCSIDS;
      r.onloadend = function () {
          // 图片的 base64 格式, 可以直接当成 img 的 src 属性值  
        var last= "."+e.target.files[0].name.match(/\.([^\.]+)$/)[1];              
          var dataURL = r.result;
          var w = dataURL.indexOf(',');
          var s = dataURL.substring(w+1);
          let data = {
              FRCMBDID: FRCMBDIDS,
              FRCCODNAME: FRCCODNAMES,
              FLIID: val.FLIID,
              FileContentBase64: s,
              FleEnt:last,
          };
          apiBase.DoService(
              data,
              apiBase.getApiAdress().FileConfig.ModifyFile,
              res => {
                //   this.openrow({FCMFCSID:this.FCMFCSIDS});
                  if(res.data.msg == '成功'){
                      Message.success('修改成功！');
                  }else{
                      Message.error('修改失败！')
                  }
              }
            );
      };
      setTimeout(() => {
            this.getData(this.ids);
        },1000)
        this.expands = [];
    },
      //获取附件详情
      openrow(val){
          this.FCMFCSIDS = val.FCMFCSID;
          let data = {
            FRCCODNAME: val.FCMFCSID,
            FRCMBDID: this.ids
          };
           apiBase.DoService(
                data,
                apiBase.getApiAdress().FileConfig.QueryFileDesc,
                res => {
                    this.fileDetail = res.data.content;
                    if(this.fileDetail.length == 0) return;
                   this.fileDetail.forEach(item => {
                        item.name = item.FLINAME + item.FLIENT;
                    });
                }
           )
      },
      closeDialog(){
        this.a = false;
        this.getData(this.ids);
      },
    closeDialogs(){
          this.$refs.dialog.close();
      },
       //下载
      download(val){
          let data = {
             FLIID: val.FLIID,
          };
           apiBase.DoService(
                data,
                apiBase.getApiAdress().FileConfig.DetailFile,
                res => {
                    var url = res.data.content.Url;
                    window.open(url);
                }
           )
      },
     
       //删除
      deletefj(val){
            this.$confirm("确认是否删除该附件?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
            .then(callback => {
            let data = {
             FLIID: val.FLIID,
            };
            apiBase.DoService(
                    data,
                    apiBase.getApiAdress().FileConfig.DeleteFile,
                    res => {
                        for(var i = 0; i < this.fileDetail.length;i++){
                            if(this.fileDetail[i].FLIID === val.FLIID){
                                this.fileDetail.splice(i,1);
                                this.getData(this.ids);
                            }
                        };
                        if(res.data.msg == '成功'){
                            Message.success('删除成功！');
                        }else{
                            Message.error('删除失败！')
                        }
                    })
            })
                 .catch(() => {
                    this.$message({
                    type: "info",
                    message: "已取消"
                    });
                }); 
      },
    //获取数据
    getData(id) {
        this.index = id;
      let data = {
        MBDID: id
      };
      apiBase.DoService(
        data,
        apiBase.getApiAdress().FileConfig.QueryRecordByMbid,
        res => {
            // this.dataList = res.data.content.OutData;
            this.diechdData = res.data.content;
            for(let index in this.diechdData){
                this.diechdData[index].FCMISNUSTDESC = this.diechdData[index].FCMISNUSTDESC;
                this.diechdData[index].FCMFCSID = this.diechdData[index].FCMFCSID; 
                this.diechdData[index].FileNum = this.diechdData[index].FileNum;
                // this.diechdData[index].read = '播放';
            }
        }
      );
    },
    //拍照上传
    photosc(index,val){
        ORDER.FCMFCSID = val.FCMFCSID;
        ORDER.FRCMBDID = this.index;
        this.a = true;
        var element = document.getElementById('big');
        element.src = 'http://b.hiphotos.baidu.com/zhidao/pic/item/64380cd7912397dd183b1c575882b2b7d0a28727.jpg';
    },
    btnShow(btn) {
      if(btn == '新增') return true;
      if(btn == '删除' && this.currentRow) return true;
      if(btn == '修改' && this.currentRow) return true;
      if(btn == '详情') return true;
    },
    //功能操作
    operate(order,id,status) {
      this.order = order;
      this.ids = id;
      this.status = status;
      switch (this.order) {
        case "附件上传":
          this.title = '附件上传';
            this.fileDetail = [];
            this.diechdData = [];
            this.$refs.dialog.open();
            this.getData(id);
          break;
        default:
      }
    },
   
  },
   created(){
    this.a = true;
    newscanWS.connects();
    
   },
  mounted() {
    this.a = false;
  },
  components: {
    dataTable,
    sweetModal,
    AttachmentsUpload,
    selectFileUpload,
  },
  watch: {

  }
};
</script>
